import React, { useEffect,useState } from "react"
import {Search} from "@react-vant/icons"
import { Swiper } from 'react-vant';
import {items} from '../component/Swiper'
import { VolumeO } from '@react-vant/icons'
import { NoticeBar } from 'react-vant'
import pn from '../img/5.jpg'
import { useNavigate } from "react-router-dom";
import style from './App.module.css'
import IndexMain from "../component/indexMain";
const Index = () =>{
    const colors = ['pink', 'blue', 'green', 'aqua', 'orange'];
    const [colorIndex, setColorIndex] = useState(0);
    const currentColor = colors[colorIndex];
    const navigate = useNavigate()


    const handelSearch = () =>{
        navigate('/searchShoop')
    }
    useEffect(() => {
        // 每隔12秒切换颜色
        const interval = setInterval(() => {
          setColorIndex((Index) => (Index + 1) % colors.length);
        }, 12000);
    

        return () => clearInterval(interval);
      }, []);
    
    return<>
        <div className={style.box} style={{backgroundImage:`url(${pn})`,  backgroundPosition:0,backgroundSize:'cover',backgroundRepeat:'no-repeat'}} >

        <span className={style.sp1}>稷下学宫</span><br></br>
        <span className={style.sp2}>SDFRYHGNA</span>
        <Search className={style.sear} onClick={()=>handelSearch()} />
        </div>

        <NoticeBar
        className={style.notbar}
        leftIcon={<VolumeO />}
        text="游戏是人们用来娱乐的一种方式，在生活中人们常常会拿游戏来消遣时间 ! ! !"
        style={{ color: currentColor }} // 动态设置文本颜色
        />
         
        <div >
            <Swiper className={style.demoswiper} autoplay={3000}>{items}</Swiper>
        </div>

        <IndexMain />
        

        


        

    
        
    </>
}
export default Index